import React, { createContext, useReducer } from "react";
import { RState, RAction, reducer } from './reducer'

// MARK: 1、创建context，约定数据类型，设置初始值
export const Context = createContext<{
    state: RState;
    dispatch: React.Dispatch<RAction>;
} | null>(null);

// ContextProvide组件
const ContextProvide: React.FC<{
    children: React.ReactNode[];
}> = (props) => {
    // MARK: 2、通过 useReducer 将「数据」和「修改数据的方法」统一注入到 context 中
    const [state, dispatch] = useReducer(reducer, { count: 0 })

    return (
        <Context.Provider value={{ state, dispatch }}>
            {props.children}
        </Context.Provider>
    );
};

export default ContextProvide;
